<template>
  <div id="biddfrom">
    <h1>基本信息</h1>
    <el-form class="commonFrom" label-width="130px">
      <el-form-item label="招标编号：">
        {{ biddFrom.biddingNo }}
      </el-form-item>
      <el-form-item label="关联工程："> {{ biddFrom.proName }}</el-form-item>
      <el-form-item label="招标单位：">
        {{ biddFrom.biddingEnterprise }}
      </el-form-item>
      <el-form-item label="预估总价："> {{ biddFrom.estimateTotalPrice }}(万元) </el-form-item>
      <el-form-item label="招标类型：" style="margin-right: 400px">
        {{ biddFrom.biddingType ? '定向' : '公开' }}
      </el-form-item>
      <el-form-item label="交付地点：" style="margin-right: 400px">
        {{ biddFrom.province }}{{ biddFrom.city }}{{ biddFrom.area }}{{ biddFrom.detailAddress }}
      </el-form-item>
      <el-form-item label="投标截止时间：" style="margin-right: 400px"> {{ biddFrom.bidDateline }}</el-form-item>
      <el-form-item label="招标内容：">
        <span v-for="(item, index) in biddFrom.addBiddingContentDtoList" :key="item.id">
          {{ item.materialName }}{{ index + 1 === biddFrom.addBiddingContentDtoList.length ? '' : ';' }}
        </span></el-form-item
      >
    </el-form>
    <h1>总采购清单</h1>
    <el-table
      :data="biddFrom.addBiddingPurchaseListDtoList"
      border
      class="inventory_table"
      ref="jdjgTable"
      :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
      :row-class-name="tabRowClassName"
    >
      <el-table-column width="60" align="center" type="index" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="品类" align="center" prop="materialName"> </el-table-column>
      <el-table-column label="规格型号" align="center" prop="model"> </el-table-column>
      <el-table-column label="单位" align="center" prop="company"> </el-table-column>
      <el-table-column label="参数指标" align="center" prop="parameterIndex"> </el-table-column>
      <el-table-column label="品牌产地" align="center" prop="brandOrigin"> </el-table-column>
      <el-table-column label="采购数量" align="center" prop="purchaseQuantity"> </el-table-column>
    </el-table>
    <h1>付款约定</h1>
    <div
      style="margin: 20px 0; height: 96px; border: 1px solid #d6d6d6; border-radius: 5px; padding: 0 10px; color: #333"
    >
      <div class="dashedbox">
        <div class="mg-box">
          投标保证金：<span>{{ biddFrom.bidBond }}(万元)</span>
        </div>
        <div class="mg-box">
          履约保证金：<span>{{ biddFrom.performanceBond }}(万元)</span>
        </div>
        <div>结算方式：<span></span></div>
      </div>
      <div class="dashedbox">支付方式：<span>银行转账；银行承兑12个月；商业承兑12个月</span></div>
      <div style="height: 32px; line-height: 32px; color: #333">
        送货后的第二个月支付上月送货金额的70%，余款待竣工验收合格后支付。付款前供货方必须提供核对正确的送货清单和增值税专票，税率为13%。
      </div>
    </div>
    <h1>补充说明</h1>
    <div
      style="margin: 20px 0; height: 80px; border: 1px solid #d6d6d6; border-radius: 5px; color: #333; padding: 0 10px"
    >
      {{ biddFrom.supplyNote || '暂无说明' }}
    </div>
    <h1>发票及税金</h1>
    <el-form label-width="130px" class="commonFrom">
      <el-form-item label="报价要求：">
        {{ biddFrom.quoteAsk ? '不含税' : '含税' }}
      </el-form-item>
      <el-form-item label="发票要求：">
        {{ biddFrom.billAsk === 0 ? '增值税专用发票' : biddFrom.billAsk === 1 ? '增值税普通发票' : '普通发票' }}
      </el-form-item>
    </el-form>
    <h1>联系方式</h1>
    <el-form label-width="130px" class="commonFrom">
      <el-form-item label="招标联系人："> {{ biddFrom.contactName }}</el-form-item>
      <el-form-item label="招标联系电话：">
        {{ biddFrom.contactPhone || '--' }}
      </el-form-item>
      <el-form-item label="技术联系人："> {{ biddFrom.technologyName }}</el-form-item>
      <el-form-item label="技术联系电话：">
        {{ biddFrom.technologyPhone || '--' }}
      </el-form-item>
    </el-form>
    <h1>{{ download === 1 ? '招标文件上传' : '招标文件下载' }}</h1>
    <div style="margin: 0 0 20px 0">
      <!-- <div v-for="item in"></div> -->
      <div class="upload-wrap" v-if="download === 1">
        <el-upload class="upload-demo" multiple :file-list="biddingFile" action>
          <template slot="trigger">
            <div ref="biddUpload"></div>
          </template>
        </el-upload>
      </div>
      <div v-else class="download">
        <el-upload class="upload-demo" multiple :file-list="biddingFile" action :on-preview="downFile">
          <template slot="trigger">
            <div ref="biddUpload"></div>
          </template>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    downLoad: {
      type: Number,
      default: 1
    },
    bidd: {
      type: Object
    }
  },
  data() {
    return {
      download: this.downLoad,
      biddFrom: this.bidd,
      biddingFile: []
    }
  },
  mounted() {
    this.getFile()
  },
  watch: {
    bidd() {
      this.biddingFile = []
      return (this.biddFrom = this.bidd)
    },
    biddFrom() {
      this.getFile()
    }
  },
  methods: {
    // 下载文件
    downFile(file) {
      this.common
        .getBlob(file.url)
        .then(res => {
          this.common.saveAs(res, file.name)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getFile() {
      if (this.bidd.biddingFile) {
        this.bidd.biddingFile.forEach(item => {
          this.biddingFile.push({
            name: item.fileName,
            url: item.fileAddress
          })
        })
      }
    },
    addIndex(index) {
      return index + 1 + (this.size - 1) * this.page
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
}
</script>
<style lang="less">
#biddfrom {
  .upload-wrap {
    .el-upload-list__item.is-success .el-upload-list__item-status-label {
      display: none;
    }
    .el-upload-list__item .el-icon-close {
      display: none;
      &:hover {
        display: none;
      }
    }
    .el-upload-list__item .el-icon-close-tip {
      display: none;
      &:hover {
        display: none;
      }
    }
    .el-upload-list__item.is-success .el-upload-list__item-name:hover {
      cursor: default;
      color: #606266;
    }
  }
}
</style>
<style lang="less" scoped>
.dashedbox {
  display: flex;
  height: 32px;
  line-height: 32px;
  border-bottom: 1px dashed #dedede;
  .mg-box {
    margin-right: 100px;
  }
}
.download {
  margin-bottom: 20px;
  /deep/.el-upload-list__item-name:hover {
    color: #fa7355;
  }
  /deep/ .el-upload {
    display: none !important;
  }
  /deep/ .el-upload-list {
    display: flex;
    align-items: center;
    width: 600px;
    flex-wrap: wrap;
    .el-upload-list__item {
      width: 260px;
      margin: 20px 30px 0 0;
      background: #f0f1f2;
      border: 1px solid #d6d6d6;
    }
    .el-upload-list__item.is-success .el-upload-list__item-status-label {
      display: none;
    }
    .el-upload-list__item .el-icon-close {
      display: none;
      &:hover {
        display: none;
      }
    }
    .el-upload-list__item .el-icon-close-tip {
      display: none;
      &:hover {
        display: none;
      }
    }
  }
}
.supplier-wrap {
  display: flex;
  flex-wrap: wrap;
  .supplierlist {
    width: 212px;
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    font-size: 14px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    margin-right: 20px;
    margin-top: 20px;
    .icon-guanbi {
      float: right;
      cursor: pointer;
      &:hover {
        color: #fa7355;
      }
    }
  }
}
.ty {
  color: #ff3d3d;
}
.list-container {
  padding: 16px 16px 40px 16px;
  height: calc(100% - 116px);
}
.biddBtn {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 999;
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
.commonFrom {
  margin-top: 10px;
  width: 80%;
  .el-form-item {
    width: 40% !important;
  }
  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
.auditfrom {
  .el-form-item {
    width: 41% !important;
  }
}
.inventory_btn_box {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  div {
    width: 50%;
  }
  .right {
    display: flex;
    justify-content: flex-end;
  }
}
.inventory_table {
  margin: 20px 0;
  width: 100%;
}
.el-textarea {
  margin: 20px 0;
  width: 100%;
}
.mgn {
  margin-top: 20px;
}
.footer {
  text-align: center;
  margin-top: 20px;
}
.material_list {
  display: inline-block;
  padding: 5px 10px;
  font-size: 14px;
  line-height: normal;
  box-sizing: border-box;
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  margin: 10px 10px;
  .iconfont {
    font-size: 12px;
    cursor: pointer;
  }
  .iconfont:hover {
    color: #fa7355;
  }
}
</style>
